<style lang="scss">
	.banner{
		width: 100%;
		height: 312upx;
		image{
			width: 100%;
			height: 100%
		}
	}
	.list{
		width: 662upx;
		margin: 0 auto;
		.input{
			line-height: 74upx;
			.name{
				color: #252525;
				font-size: 32upx;
			}
			input{
				border: 1px solid #cdcdcd;
				border-radius: 5px;
				font-size: 32upx;
				width: 90%;
				padding: 11upx 5%;
			}
			.pickerText{
				line-height: 76upx;
				border: 1px solid #cdcdcd;
				border-radius: 5px;
				font-size: 32upx;
				color: #b2b2b2;
				padding: 0 5%;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					right: 20upx;
					top: 50%;
					margin-top: -8upx;
					width: 0;
					height: 0;
					border-left: 8upx solid transparent;
					border-right: 8upx solid transparent;
					border-top: 16upx solid #cdcdcd;
				}
			}
			
		}
	}
	.confirm_btn{
		width: 620upx;
		line-height: 88upx;
		background: #c81346;
		text-align: center;
		color: #ffffff;
		font-size: 34upx;
		margin: 0 auto;
		border-radius: 10upx;
		margin: 46upx auto;
	}
	.tips-text{
		width: 600upx;
		margin: 0 auto;
		line-height: 44upx;
		text{
			display: block;
			color: #262626;
			font-size: 24upx;
		}
	}
</style>

<template>
	<view class="page">
		<view class="banner"><image src="https://jewel.gdhenglang.com/static/images/be_banner.jpg"></image></view>
		<view class="list">
			<view class="input">
				<view class="name">姓名:</view><input type="text" placeholder="请输入姓名" v-model="data.realname"  placeholder-style="color:#b2b2b2" />
			</view>
			<view class="input">
				<view class="name">手机:</view><input type="number" placeholder="请输入手机号" v-model="data.mobile" placeholder-style="color:#b2b2b2" />
			</view>
			<view class="input" @tap="showMulLinkageThreePicker">
				<view class="name">意向分享地区:</view>
				<view class="pickerText">{{pickerText}}</view>
			</view>
		</view>
		<button class="confirm_btn" @tap="Confirm">提交</button>
		<view class="tips-text">
			<text>注释：</text>
			<text>①享宝先锋享受分享享宝奖励</text>
			<text>②首单指定珠宝享宝满年免损耗综合费</text>
		</view>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" @onConfirm="pickerOnConfirm"></mpvue-city-picker>
		
		<view class="m-full-loading" v-if="showLoading">
		    <image src="../../../../static/images/loading.gif" mode="widthFix"></image>
		</view>
	</view>
</template>
<script>
	import henglang from '@/common/common_zb.js';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import area from '@/components/mpvue-citypicker/city-data/area.js';
	import city from '@/components/mpvue-citypicker/city-data/city.js';
	import province from '@/components/mpvue-citypicker/city-data/province.js';
	export default {
		data() {
			return {
                showPopup: false,
				showLoading: false,
				isMaker:false,
				pickerText:'请选择城市',
				themeColor: 'red',
				data: {
				    realname: '',
				    mobile: '',
					address:''
				}
			};
		},
		components: {
		    mpvueCityPicker
		},
        methods: {
			// 三级联动选择
			showMulLinkageThreePicker() {
			    this.$refs.mpvueCityPicker.show();
				uni.hideKeyboard()
			},
			pickerOnConfirm(e) {
			    let val = e.value;
			    this.pickerText = this.data.address  = e.label.replace(/-/g, ',');
			},
			Confirm(){
				let that = this
				if(that.data.realname == ''){
					henglang.showToast('请输入姓名')
					return false
				}else if(!henglang.checkPhone(that.data.mobile)){
					henglang.showToast('请输入正确的手机号码')
					return false
				}else if(that.data.address == ''){
					henglang.showToast('请选择城市')
					return false
				}
				henglang.post('Maker/beVan',that.data,true,function(res){
					henglang.showToast(res.data.msg)
					if(res.data.code == 0){
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/jewel/user/user'
							})
						}, 3000)
					}
				});
			}
        }
	}
</script>

